<template>
  <el-form class="environment" v-bind="$attrs" @submit.native.prevent>
    <el-form-item label="天气设置" class="shrink-process-label">
      <div class="shrink" @click="shrink('normal')">
        <SvgIcon v-if="shrinkFlag.normal" icon-class="ic_向上" />
        <SvgIcon v-else icon-class="ic_向下" />
      </div>
      <div class="line"></div>
      <div v-if="shrinkFlag.normal" class="shrink-contain">
        <div v-for="item in formData.normal">
          <div class="row-item">
            <SvgIcon :icon-class="weatherIcon[item.key]" class="item-icon" />
            <span>{{ item.label }}</span>

            <el-switch
              active-text="开"
              inline-prompt
              inactive-text="关"
              v-model="item.params.enable"
              @change="updateEnvironment(item)"
            />
          </div>
          <div v-if="item.params.enable && item.key !== 'sunny'" class="row-item margin-top-small">
            <el-slider
              class="silder-select"
              :key="item.key"
              v-model="item.value"
              :marks="marks[item.key]"
              :min="1"
              :max="3"
              :step="1"
              :format-tooltip="() => tooltip(item)"
              @change="updateEnvironment(item)"
            />
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="其他设置" class="shrink-process-label">
      <div class="shrink" @click="shrink('other')">
        <SvgIcon v-if="shrinkFlag.other" icon-class="ic_向上" />
        <SvgIcon v-else icon-class="ic_向下" />
      </div>
      <div class="line"></div>
      <div v-if="shrinkFlag.other" class="shrink-contain">
        <div v-for="item in formData.other">
          <div class="row-item">
            <span>{{ item.label }}</span>

            <el-switch
              active-text="开"
              inline-prompt
              inactive-text="关"
              v-model="item.params.enable"
              @change="hanler(item)"
            />
          </div>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { getLayerMap } from '@/service';
import { useSceneStore } from '@/store/scene';

defineOptions({
  name: 'Environment',
});

interface IProps {
  form: any;
}
const props = withDefaults(defineProps<IProps>(), {
  form: {},
});

const sceneStore = useSceneStore();

const shrinkFlag = reactive<any>({
  normal: true,
  other: true,
});
const marks = ref<any>({
  overcast: {
    1: {
      label: '少云',
      style: {},
    },
    2: {
      label: '多云',
      style: {},
    },
    3: {
      label: '阴',
      style: {},
    },
  },
  rain: {
    1: {
      label: '小雨',
      style: {},
    },
    2: {
      label: '中雨',
      style: {},
    },
    3: {
      label: '大雨',
      style: {},
    },
  },
  snow: {
    1: {
      label: '小雪',
      style: {},
    },
    2: {
      label: '中雪',
      style: {},
    },
    3: {
      label: '大雪',
      style: {},
    },
  },
  fog: {
    1: {
      label: '雾',
      style: {},
    },
    2: {
      label: '扬尘',
      style: {},
    },
    3: {
      label: '霾',
      style: {},
    },
  },
});

const formData = ref<any>({
  normal: [],
  other: [],
});

const weatherIcon: any = {
  sunny: 'ic_晴',
  overcast: 'ic_阴',
  rain: 'ic_雨',
  snow: 'ic_雪',
  fog: 'ic_雾',
};

function tooltip(item: any) {
  return marks.value[item.key][item.value].label;
}

function shrink(str: string) {
  shrinkFlag[str] = !shrinkFlag[str];
}

function updateEnvironment(item: any) {
  const cimInstance = window.cimInstance;
  const list = formData.value.normal.filter((item: any) => item.key !== 'fog');
  const flag = list.every((item: any) => !item.params.enable);
  // 晴，阴，雨，雪关闭时默认晴打开
  if (flag) {
    formData.value.normal[0].params.enable = true;
    cimInstance.api.updateWeather({
      type: 'sunny',
    });
    return;
  }

  if (item.key === 'sunny') {
    changeStatus(item);
    cimInstance.api.updateWeather({
      type: item.key,
    });
  } else if (['rain', 'snow', 'overcast'].includes(item.key)) {
    changeStatus(item);
    cimInstance.api.updateWeather({
      type: item.key,
      level: item.value,
    });
  } else if (item.key === 'fog') {
    const fogObj = sceneStore.globalEffectSetting.process[8].value;
    const param: any = {
      enable: item.params.enable,
      type: item.key,
      level: item.value,
    };
    if (!fogObj.enabled) {
      param.color = 'rgba(255, 255, 255, 0.8)';
    }
    cimInstance.api.updateWeather(param);
  }
}

function changeStatus(item: any) {
  formData.value.normal.forEach((ele: any) => {
    if (item.key !== ele.key && ele.key !== 'fog') {
      ele.params.enable = false;
    }
  });
}

function hanler(item: any) {
  const cimInstance = window.cimInstance;
  if (item.key === 'sky') {
    cimInstance.api.setSkyVisible(item.params.enable);
  } else {
    const layerMap = getLayerMap();
    if (layerMap.get(item.params.code)) {
      cimInstance.api.setLayerVisible(item.params.layerName, item.params.enable);
    } else {
      cimInstance.api.addRectangleLayer({
        enable: true,
        type: 'rectangle',
        name: '云层',
        datas: [[-180, -90, 180, 90]],
        orbitTheEarth: true,
        images: [require('@/assets/png/earth_cloud.png')],
      });
      layerMap.set(item.params.code, item.params.code);
    }
  }
}

watchEffect(() => {
  formData.value = props.form;
});
</script>

<style lang="less" scoped>
.environment {
  .item-icon {
    font-size: 16px;
    margin-right: 4px;
  }

  .silder-select {
    margin-bottom: 15px;
    padding: 0 5px;

    :deep(.el-slider__marks-text) {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }

    :deep(.el-slider__marks-text) {
      &:first-of-type {
        transform: translateX(-5px);
      }

      &:last-of-type {
        transform: translateX(-100%);
      }
    }
    :deep(.el-slider__runway) {
      background: #2f333b !important;
    }

    :deep(.el-slider__bar) {
      background: #0560fd;
    }

    :deep(.el-slider__stop) {
      display: none;
    }
  }
}
</style>
